<template>
	<u-popup :show="show" @close="closeHandler" round="20rpx">
		<view class="u-picker">
			<view class="u-picker_flex font-32 font-weight-500 color-d h-96">选择日期 <u-icon name="close" color="#999999"
					class="icon" @click="cancel"></u-icon>
			</view>

			<view class="relative">
				<view class="absolute"></view>
				<view class="df">
					<view class="flex-1">
						<swiper :vertical="true" class="swiper" :display-multiple-items="6" @change="years"
							:current="columns[0].length - 6">
							<swiper-item class="swiper-item" v-for="(item, i) in columns[0]" :key="i">
								<view class="flex row-center font-44 font-weight-500"
									:class="yearsIndex + 3 === i ? 'color-b' : 'color-a'">
									{{ item }}
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="flex-1">
						<swiper :current="monthIndex" :vertical="true" class="swiper" :display-multiple-items="6"
							@change="month">
							<swiper-item class="swiper-item" v-for="(item, i) in columns[1]" :key="i">
								<view class="flex row-center font-44 font-weight-500"
									:class="monthIndex + 3 === i ? 'color-b' : 'color-a'">
									{{ item }}
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<!-- <view class="picker">
				<view class="picker-mask"></view>
				<u-datetime-picker :show="true" v-model="value1" mode="year-month" @change="change"></u-datetime-picker>
			</view> -->
			<view class="btn" @click="confirm">确认</view>
		</view>
	</u-popup>
</template>

<script>
	/**
	 * u-picker
	 * @description 选择器
	 * @property {Boolean}			show				是否显示picker弹窗（默认 false ）
	 * @property {Boolean}			showToolbar			是否显示顶部的操作栏（默认 true ）
	 * @property {String}			title				顶部标题
	 * @property {Array}			columns				对象数组，设置每一列的数据
	 * @property {Boolean}			loading				是否显示加载中状态（默认 false ）
	 * @property {String | Number}	itemHeight			各列中，单个选项的高度（默认 44 ）
	 * @property {String}			cancelText			取消按钮的文字（默认 '取消' ）
	 * @property {String}			confirmText			确认按钮的文字（默认 '确定' ）
	 * @property {String}			cancelColor			取消按钮的颜色（默认 '#909193' ）
	 * @property {String}			confirmColor		确认按钮的颜色（默认 '#3c9cff' ）
	 * @property {Array}			singleIndex			选择器只有一列时，默认选中项的索引，从0开始（默认 0 ）
	 * @property {String | Number}	visibleItemCount	每列中可见选项的数量（默认 5 ）
	 * @property {String}			keyName				选项对象中，需要展示的属性键名（默认 'text' ）
	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器（默认 false ）
	 * @property {Array}			defaultIndex		各列的默认索引
	 * @property {Boolean}			immediateChange		是否在手指松开时立即触发change事件（默认 false ）
	 * @event {Function} close		关闭选择器时触发
	 * @event {Function} cancel		点击取消按钮触发
	 * @event {Function} change		当选择值变化时触发
	 * @event {Function} confirm	点击确定按钮，返回当前选择的值
	 */
	import props from './props.js';
	export default {
		name: 'Picker',
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		data() {
			return {
				// 上一次选择的列索引
				lastIndex: [],
				// 索引值 ，对应picker-view的value
				innerIndex: [],
				// 各列的值
				innerColumns: [],
				// 上一次的变化列索引
				columnIndex: 0,
				yearsIndex: 0,
				monthIndex: new Date().getMonth(),
				value1: Number(new Date()),
			}
		},
		watch: {
			// 监听默认索引的变化，重新设置对应的值
			defaultIndex: {
				immediate: true,
				handler(n) {
					this.setIndexs(n, true)
				}
			},
			// 监听columns参数的变化
			columns: {
				immediate: true,
				handler(n) {
					this.setColumns(n)
					this.yearsIndex = this.columns[0].length - 6
				}
			},
		},
		methods: {
			years(e) {
				this.yearsIndex = e.detail.current;
			},
			month(e) {
				this.monthIndex = e.detail.current;
			},
			// 获取item需要显示的文字，判别为对象还是文本
			getItemText(item) {
				if (uni.$u.test.object(item)) {
					return item[this.keyName]
				} else {
					return item
				}
			},
			// 关闭选择器
			closeHandler() {
				if (this.closeOnClickOverlay) {
					this.$emit('close')
				}
			},
			// 点击工具栏的取消按钮
			cancel() {
				this.yearsIndex = this.columns[0].length - 6
				this.$emit('cancel')
			},
			// 点击工具栏的确定按钮
			confirm() {
				this.$emit('confirm', {
					years: this.columns[0][this.yearsIndex + 3],
					month: this.columns[1][this.monthIndex + 3],
				})
			},
			// 选择器某一列的数据发生变化时触发
			changeHandler(e) {
				const {
					value
				} = e.detail
				let index = 0,
					columnIndex = 0
				// 通过对比前后两次的列索引，得出当前变化的是哪一列
				for (let i = 0; i < value.length; i++) {
					let item = value[i]
					if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
						// 设置columnIndex为当前变化列的索引
						columnIndex = i
						// index则为变化列中的变化项的索引
						index = item
						break // 终止循环，即使少一次循环，也是性能的提升
					}
				}
				this.columnIndex = columnIndex
				const values = this.innerColumns
				// 将当前的各项变化索引，设置为"上一次"的索引变化值
				this.setLastIndex(value)
				this.setIndexs(value)

				this.$emit('change', {
					// #ifndef MP-WEIXIN
					// 微信小程序不能传递this，会因为循环引用而报错
					picker: this,
					// #endif
					value: this.innerColumns.map((item, index) => item[value[index]]),
					index,
					indexs: value,
					// values为当前变化列的数组内容
					values,
					columnIndex
				})
			},
			// 设置index索引，此方法可被外部调用设置
			setIndexs(index, setLastIndex) {
				this.innerIndex = uni.$u.deepClone(index)
				if (setLastIndex) {
					this.setLastIndex(index)
				}
			},
			// 记录上一次的各列索引位置
			setLastIndex(index) {
				// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
				// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
				this.lastIndex = uni.$u.deepClone(index)
			},
			// 设置对应列选项的所有值
			setColumnValues(columnIndex, values) {
				// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
				this.innerColumns.splice(columnIndex, 1, values)
				// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
				let tmpIndex = uni.$u.deepClone(this.innerIndex)
				for (let i = 0; i < this.innerColumns.length; i++) {
					if (i > this.columnIndex) {
						tmpIndex[i] = 0
					}
				}
				// 一次性赋值，不能单个修改，否则无效
				this.setIndexs(tmpIndex)
			},
			// 获取对应列的所有选项
			getColumnValues(columnIndex) {
				// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
				// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
				(async () => {
					await uni.$u.sleep()
				})()
				return this.innerColumns[columnIndex]
			},
			// 设置整体各列的columns的值
			setColumns(columns) {
				this.innerColumns = uni.$u.deepClone(columns)
				// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
				if (this.innerIndex.length === 0) {
					this.innerIndex = new Array(columns.length).fill(0)
				}
			},
			// 获取各列选中值对应的索引
			getIndexs() {
				return this.innerIndex
			},
			// 获取各列选中的值
			getValues() {
				// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
				// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
				(async () => {
					await uni.$u.sleep()
				})()
				return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-picker {
		position: relative;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;

		&_flex {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.icon {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%)
			}
		}
	}

	.swiper {

		height: 34*6px;
		// height: 68rpx;
		overflow: visible;

		// .swiper-item {
		// 	height: 35px !important;
		// 	line-height: 34px;
		// }
	}

	.absolute {
		position: absolute;
		width: 690rpx;
		height: 34px;
		background-color: #FFF1F1;
		top: 34*3px;
		border-radius: 8px;
	}

	.relative {
		position: relative;
		padding: 0 15px;
	}

	.relative::before {
		content: "";
		display: block;
		width: 100%;
		height: 34*3px;
		background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
	}

	.relative::after {
		content: "";
		display: block;
		width: 100%;
		height: 34*3px;
		background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		pointer-events: none;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #FB2D19;
		border-radius: 49rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 30rpx auto 98rpx;
	}

	// .picker {
	// 	position: relative;

	// 	&-mask {
	// 		width: 690rpx;
	// 		background-color: rgba($color: $b, $alpha: 0.1);
	// 		position: absolute;
	// 		top: 50%;
	// 		left: 50%;
	// 		z-index: 6666666;
	// 		height: 88rpx;
	// 		transform: translate(-50%, -50%);
	// 		border-radius: 16rpx;
	// 		pointer-events: none;
	// 	}
	// }
</style>
